import { ModalForm } from '@ant-design/pro-components';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Tag } from 'antd';
import { querySensorHistories } from '../service';
import type { SensorHistoryTableItem } from '../types';

export default (props: { deviceMark: string }) => {
  const { deviceMark } = props;
  const columns: ProColumns<SensorHistoryTableItem>[] = [
    {
      title: 'id',
      dataIndex: '_id',
      hideInSearch: true,
      hideInForm: true,
      hideInTable: true,
    },
    {
      title: '消息类型',
      dataIndex: 'messageType',
      hideInSearch: true,
      hideInForm: true,
      align: 'center',
      width: 100,
      valueEnum: {
        TMoteStatus: { text: '心跳/状态' },
        PamaInstantSpaceChange: { text: '帕玛流水记录' },
        PamaTimingSpaceStatus: { text: '帕玛状态信息' },
        PamaDeviceStatus: { text: '帕玛设备状态' },
      },
    },
    {
      title: '上报时间',
      dataIndex: 'revicedTime',
      hideInSearch: true,
      hideInForm: true,
      align: 'center',
      valueType: 'dateTime',
      width: 180,
    },
    {
      title: '车位编号',
      dataIndex: 'berthCode',
      hideInSearch: true,
      hideInForm: true,
      align: 'center',
      width: 100,
    },
    {
      title: '地磁状态',
      dataIndex: ['tmoteStatus', 'status'],
      hideInSearch: true,
      hideInForm: true,
      align: 'center',
      width: 100,
      valueEnum: {
        0: { text: <Tag color="success">车辆驶出</Tag> },
        1: { text: <Tag color="error">车辆驶入</Tag> },
        2: { text: <Tag color="success">持续空闲</Tag> },
        3: { text: <Tag color="error">持续占用</Tag> },
        98: { text: <Tag color="error">设备故障</Tag> },
      },
    },
    {
      title: '状态变化计数',
      dataIndex: ['tmoteStatus', 'count'],
      hideInSearch: true,
      hideInForm: true,
      hideInTable: true,
      align: 'center',
      width: 100,
    },
    {
      title: '状态变化时间',
      dataIndex: ['tmoteStatus', 'statusChangeTime'],
      hideInSearch: true,
      hideInForm: true,
      align: 'center',
      valueType: 'dateTime',
      width: 180,
    },
    {
      title: '信号强度',
      dataIndex: ['tmoteStatus', 'rssi'],
      hideInSearch: true,
      hideInForm: true,
      align: 'center',
      width: 100,
    },
    {
      title: '信噪比',
      dataIndex: ['tmoteStatus', 'snr'],
      hideInSearch: true,
      hideInForm: true,
      align: 'center',
      width: 100,
    },
  ];
  return (
    <ModalForm
      width="65vw"
      title={`地磁设备 ${deviceMark} 历史数据`}
      submitter={false}
      trigger={<a>{deviceMark}</a>}
      modalProps={{
        destroyOnClose: true,
      }}
    >
      <ProTable
        columns={columns}
        columnEmptyText="暂无数据"
        search={false}
        options={false}
        scroll={{ x: true }}
        style={{ whiteSpace: 'nowrap' }}
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 5,
          size: 'default',
        }}
        debounceTime={300}
        request={async (param, sort) => {
          const res = await querySensorHistories(deviceMark, param, sort);
          return res;
        }}
      />
    </ModalForm>
  );
};
